<template>
	<view class="home">
		<input v-model="myId" style="margin: 10px 30px" placeholder="自己的id" />
		<input v-model="otherId" placeholder="对方的id" />
		<view class="msg">
			<view v-for="(item, index) in msg" :key="index">
				<view v-if="item.from !== myId" style="text-align: left">
					{{ item.from }}：{{ item.msg }}
				</view>
				<view v-else style="text-align: right">
					{{ item.from }}：{{ item.msg }}
				</view>
			</view>
		</view>
		<input v-model="msgInput" style="margin: 10px 30px" />
		<button @click="send">发送</button>
	</view>
</template>

<script>

import { socket } from '@/js_sdk/socket.js'
export default {
	data() {
		return {
			myId: "",
			otherId: "",
			msg: [],
			msgInput: "",
		}
	},
	created() {

	},
	mounted() {
		socket.on("opend", (res) => {
			console.log('opend:', res)
		})
		socket.on("joined", (res) => {
			console.log('joined:', res)
		})
		socket.on("add", (res) => {
			console.log('add:', res)
			if (res.to === this.myId) {
				this.msg.push(res)
			}
		})
	},
	methods: {
		send() {
			if (this.myId && this.otherId && this.msgInput) {
				const message = {
					from: this.myId,
					to: this.otherId,
					msg: this.msgInput
				}
				// 发送信息
				socket.emit('sendMsg', message)

				this.msg.push(message)
			} else {
				// alert('自己的id、对方的id、对话不能为空')
			}
		}

	}
}
</script>

<style>
.msg {
	border: solid 1px #ccc;
	height: 300px;
	width: 100%;
	overflow: auto;
}

.msg::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 4px;
	height: 4px;
}

.msg::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.2);
}

.msg::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 0;
	background: rgba(0, 0, 0, 0.1);
}
</style>
